<template>
  <div class="userCollectBox" v-if="userFavorites.recipes.length > 0">
    <UserCollectItem
      v-for="item in userFavorites.recipes"
      :key="item.id"
      :item="item"
    />
  </div>
  <div class="userCollectBox" v-else>
    <div class="none">TA还没有收藏</div>
  </div>
</template>

<script setup lang="ts">
import UserCollectItem from "@/components/UserCollectItem.vue";
import { useDouguoStore } from "@/stores/douguo";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import { useRouter } from "vue-router";

const douguo = useDouguoStore();

const { userFavorites } = storeToRefs(douguo);

const { updataUserFavorites } = douguo;

const route: object = useRouter();

const obj1 = ref({
  id: route.currentRoute.value.query.id,
  offset: 0,
  limit: 20,
});

updataUserFavorites(obj1);
</script>

<style lang="scss" scoped>
.userCollectBox {
  padding: 15px 15px 0;
  border-top: 1px solid #e2e2e2;

  .none {
    color: #999;
    font-size: 16px;
    margin-top: 20px;
    text-align: center;
  }
}
</style>
